<template>
	<view class="base-detail">
		<!-- 顶部导航 -->
		<custom-header :title="baseName" sticky />

		<!-- 表格区域 -->
		<view class="table-card">
			<!-- 表格 -->
			<view class="table">
				<!-- 表头 -->
				<view class="table-row header-row">
					<text class="table-cell header-cell">基地名</text>
					<text class="table-cell header-cell">总量</text>
					<text class="table-cell header-cell">降级</text>
					<text class="table-cell header-cell">退货</text>
					<text class="table-cell header-cell">换货</text>
				</view>

				<!-- 数据行 -->
				<view class="table-row" v-for="(item, index) in detailData" :key="index">
					<view class="table-cell flower-name"
						@click="handleNumberClick('downgrade', item)">
						<text>{{ item.flowerName }}</text>
						<image class="arrow-icon" src="/static/common/right_icon.png" mode="aspectFit" />
					</view>
					<text class="table-cell">{{ item.total }}</text>
					<text class="table-cell number-cell"
						@click="handleNumberClick('downgrade', item)">{{ item.downgrade }}</text>
					<text class="table-cell number-cell"
						@click="handleNumberClick('return', item)">{{ item.return }}</text>
					<text class="table-cell number-cell"
						@click="handleNumberClick('exchange', item)">{{ item.exchange }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'

	// 接收页面参数
	const baseName = ref('')
	const baseData = reactive({
		downgrade: 0,
		return: 0,
		exchange: 0
	})

	// 详细数据
	const detailData = reactive([{
			flowerName: '春风花卉',
			total: 2,
			downgrade: 2,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '姣姣花卉',
			total: 9,
			downgrade: 0,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '南溪花卉基地',
			total: 6,
			downgrade: 0,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '源盛花卉',
			total: 10,
			downgrade: 0,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '佳锐花卉',
			total: 16,
			downgrade: 0,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '联盟花卉',
			total: 24,
			downgrade: 0,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '绿菜花卉',
			total: 69,
			downgrade: 1,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '静璇花卉',
			total: 24,
			downgrade: 0,
			return: 5,
			exchange: 5
		},
		{
			flowerName: '春富花卉',
			total: 471,
			downgrade: 0,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '名香花卉',
			total: 15,
			downgrade: 0,
			return: 0,
			exchange: 0
		},
		{
			flowerName: '祥平花卉',
			total: 70,
			downgrade: 5,
			return: 1,
			exchange: 1
		},
		{
			flowerName: '欣候花卉',
			total: 27,
			downgrade: 0,
			return: 0,
			exchange: 0
		}
	])

	onMounted(() => {
		// 获取页面参数
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		baseName.value = options.baseName || '基地详情'
		baseData.downgrade = parseInt(options.downgrade || 0)
		baseData.return = parseInt(options.return || 0)
		baseData.exchange = parseInt(options.exchange || 0)
	})

	// 处理数字点击
	const handleNumberClick = (type, item) => {
		uni.navigateTo({
			url: `/pages/statisticDetail/statisticDetail?type=${type}`
		})
	}
</script>

<style lang="scss" scoped>
	.base-detail {
		min-height: 100vh;
		background: #ffffff;
		// 表格卡片
		.table-card {
			margin: 24rpx;
			.table {
				.table-row {
					display: flex;
					align-items: center;
					gap: 6rpx;
					margin-bottom: 8rpx;
					&.header-row {
						height: 80rpx;
						.header-cell {
							color: #f5564d;
							font-size: 28rpx;
							// border-right: none;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 4rpx;
							background: #FFF4F2;
							border: 1px solid #FFF4F2;

							&:last-child {
								border-right: none;
							}
						}
					}

					&:not(.header-row) {
						height: 80rpx;
						border-top: none;
						background: transparent;
					}

					.table-cell {
						flex: 1;
						text-align: center;
						font-size: 28rpx;
						color: #666666;
						border-right: none;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 4px;
						background: #FFFFFF;
						border: 1px solid #F0F0F0;
						margin: 0;
						padding: 0;

						&:last-child {
							border-right: none;
						}

						&:first-child {
							flex: none;
							width: 306rpx;
							text-align: center;
						}

						&.flower-name {
							flex: none;
							width: 306rpx;
							text-align: center;
							border-radius: 4px;
							background: #FFFFFF;
							border: 1px solid #F0F0F0;

							text {
								// flex: 1;
								color: #666666;
							}

							.arrow-icon {
								width: 20rpx;
								height: 20rpx;
								opacity: 0.8;
								margin-left: 4rpx;
								flex-shrink: 0;
							}
							&:active {
								background-color: #f1f1f1;
							}
						}

						&.number-cell {
							color: #666666;
							// cursor: pointer;

							// &:hover {
							// 	color: #4298ff;
							// }
							&:active {
								background-color: #f1f1f1;
							}
						}
					}
				}
			}
		}
	}
</style>